<script setup lang="ts">
import UvVtabs from '@/uv-ui/components/uv-vtabs/components/uv-vtabs/uv-vtabs.vue'
import UvVtabsItem from '@/uv-ui/components/uv-vtabs/components/uv-vtabs-item/uv-vtabs-item.vue'

function handleClickLeft() {
  uni.navigateBack()
}

const list = [
  {
    name: '客单',
  },
  {
    name: '预结单',
  },
  {
    name: '结账单',
  },
  {
    name: '交接班',
  },
  {
    name: '营业概况报表',
  },
]
const current = ref(0)

const change = (index) => {
  current.value = index
}
const { ctx } = getCurrentInstance()
const contentHeight = ref(0)
onReady(() => {
  ctx.$uv.getRect('.content-container').then((res) => {
    // 减掉导航
    contentHeight.value = res.height
  })
})
</script>

<template>
  <view class="h-full flex flex-col overflow-hidden">
    <wd-navbar
      title="票据样式"
      left-text="返回"
      left-arrow
      @click-left="handleClickLeft"
    ></wd-navbar>
    <view class="flex-1 overflow-hidden content-container">
      <uv-vtabs :chain="false" :list="list" @change="change" custom-class="!bg-transparent">
        <uv-vtabs-item>
          <scroll-view class="box-border p-1 bg-pagebg" :style="{ height: `${contentHeight}px` }">
            <view class="bg-white w-full h-full p-[10px] box-border">
              <view class="text-center pt-6 border-b-1 border-b-main border-b-dashed pb-2">
                <view>
                  <wd-text text="结账单" color="#333" size="14px"></wd-text>
                </view>
                <view class="mt-1">
                  <wd-text text="店铺名称" color="#333" size="14px"></wd-text>
                </view>
              </view>
              <view
                class="w-full inline-flex flex-col py-2 leading-normal border-b-1 border-b-main border-b-dashed pb-2"
              >
                <wd-text text="宴会名称: 宴会" color="#333" size="14px"></wd-text>
                <wd-text text="桌号: 2000" color="#333" size="14px"></wd-text>
                <wd-text text="流水号/牌号: 2000" color="#333" size="14px"></wd-text>
                <wd-text text="预定人电话: 13800000000" color="#333" size="10px"></wd-text>
                <wd-text text="预定人姓名: 张三" color="#333" size="10px"></wd-text>
                <wd-text text="预定时间: 2024-01-01 12:00:00" color="#333" size="10px"></wd-text>
                <wd-text text="人数: 2" color="#333" size="10px"></wd-text>
                <wd-text text="类型: 堂食" color="#333" size="10px"></wd-text>
                <wd-text text="结账时间: 2024-01-01 12:00:00" color="#333" size="10px"></wd-text>
                <wd-text text="收银员: 张三" color="#333" size="10px"></wd-text>
                <wd-text text="会员: 张三（110003930）" color="#333" size="10px"></wd-text>
                <wd-text text="单号: 1110000" color="#333" size="10px"></wd-text>
                <wd-text text="调整单号: 1110001" color="#333" size="10px"></wd-text>
                <wd-text text="原来单号: 1110009" color="#333" size="10px"></wd-text>
              </view>
              <view
                class="w-full inline-flex flex-col py-2 border-b-1 border-b-main border-b-dashed pb-2"
              >
                <wd-row>
                  <wd-col :span="10">
                    <wd-text text="品项" color="#333" size="10px"></wd-text>
                  </wd-col>
                  <wd-col :span="3">
                    <wd-text text="数量" color="#333" size="10px"></wd-text>
                  </wd-col>
                  <wd-col :span="3" custom-class="text-right">
                    <wd-text text="小计" color="#333" size="10px"></wd-text>
                  </wd-col>
                  <wd-col :span="8" custom-class="text-right">
                    <wd-text text="优惠价" color="#333" size="10px"></wd-text>
                  </wd-col>
                </wd-row>
                <wd-row>
                  <wd-col :span="10">
                    <wd-text text="西红柿" color="#333" size="10px"></wd-text>
                  </wd-col>
                  <wd-col :span="3">
                    <wd-text text="10" color="#333" size="10px"></wd-text>
                  </wd-col>
                  <wd-col :span="3" custom-class="text-right">
                    <wd-text text="100" color="#333" size="10px"></wd-text>
                  </wd-col>
                  <wd-col :span="8" custom-class="text-right">
                    <wd-text text="100" color="#333" size="10px"></wd-text>
                  </wd-col>
                </wd-row>
                <wd-row>
                  <wd-col :span="10" custom-class="pl-1">
                    <wd-text text="-加料:珍珠" color="#333" size="10px"></wd-text>
                  </wd-col>
                  <wd-col :span="3">
                    <wd-text text="1" color="#333" size="10px"></wd-text>
                  </wd-col>
                  <wd-col :span="3" custom-class="text-right"></wd-col>
                  <wd-col :span="8" custom-class="text-right"></wd-col>
                </wd-row>
              </view>
              <view
                class="w-full inline-flex flex-col py-2 border-b-1 border-b-main border-b-dashed pb-2"
              >
                <wd-row>
                  <wd-col :span="12">
                    <wd-text text="菜品价格合计" color="#333" size="10px"></wd-text>
                  </wd-col>
                  <wd-col :span="12" custom-class="text-right">
                    <wd-text text="100" color="#333" size="10px"></wd-text>
                  </wd-col>
                </wd-row>
                <wd-row>
                  <wd-col :span="12">
                    <wd-text text="服务费合计" color="#333" size="10px"></wd-text>
                  </wd-col>
                  <wd-col :span="12" custom-class="text-right">
                    <wd-text text="100" color="#333" size="10px"></wd-text>
                  </wd-col>
                </wd-row>
                <wd-row>
                  <wd-col :span="12">
                    <wd-text text="订单金额" color="#333" size="10px"></wd-text>
                  </wd-col>
                  <wd-col :span="12" custom-class="text-right">
                    <wd-text text="100" color="#333" size="10px"></wd-text>
                  </wd-col>
                </wd-row>
              </view>
              <view
                class="w-full inline-flex flex-col py-2 border-b-1 border-b-main border-b-dashed pb-2"
              >
                <wd-row>
                  <wd-col :span="12">
                    <wd-text text="现金优惠" color="#333" size="10px"></wd-text>
                  </wd-col>
                  <wd-col :span="12" custom-class="text-right">
                    <wd-text text="-80" color="#333" size="10px"></wd-text>
                  </wd-col>
                </wd-row>
                <wd-row>
                  <wd-col :span="12">
                    <wd-text text="抹零" color="#333" size="10px"></wd-text>
                  </wd-col>
                  <wd-col :span="12" custom-class="text-right">
                    <wd-text text="-10" color="#333" size="10px"></wd-text>
                  </wd-col>
                </wd-row>
                <wd-row>
                  <wd-col :span="12">
                    <wd-text text="手动抹零" color="#333" size="10px"></wd-text>
                  </wd-col>
                  <wd-col :span="12" custom-class="text-right">
                    <wd-text text="-10" color="#333" size="10px"></wd-text>
                  </wd-col>
                </wd-row>
                <wd-row>
                  <wd-col :span="12">
                    <wd-text text="应付金额" color="#333" size="16px"></wd-text>
                  </wd-col>
                  <wd-col :span="12" custom-class="text-right">
                    <wd-text text="100" color="#333" size="16px"></wd-text>
                  </wd-col>
                </wd-row>
              </view>
            </view>
          </scroll-view>
        </uv-vtabs-item>
      </uv-vtabs>
    </view>
  </view>
</template>

<style scoped lang="scss"></style>
